<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
    button{
        width: 100%;
        height: 50px;
        text-align: left;
    }
    div{
        border: 1px solid grey;
    }
    section{
        text-align: right;
        margin-top: -20px;
    }
    </style>
</head>
<body>
    <main id="app">
        <button @click='classMate()'>同学
            <section>2/3</section>
        </button>
        <classmate-com  v-if='mateShow'></classmate-com>

        <button @click='family()'>
            家人
                <section>3/3</section>
        </button>
        <family-com v-if='familyShow'></family-com>

        <button @click='friend()'>朋友
                <section>1/3</section>
        </button>
        <friend-com v-if='friendShow'></friend-com>
       
    </main>

    <script id="mate" type="text/html">
        <main>
            <div v-for='name in classMate'>
                <h3>{{name.name}}</h3>
                <h4>{{name.say}}</h4>
            </div>
        </main>
    </script>
    <script id="family" type="text/html">
        <main>
            <div v-for='family in familyMate'>
                <h3>{{family.name}}</h3>
                <h4>{{family.say}}</h4>
            </div>
        </main>
    </script>
    <script id="friend" type="text/html">
        <main>
            <div v-for='friend in friendMate'>
                <h3>{{friend.name}}</h3>
                <h4>{{friend.say}}</h4>
            </div>
        </main>
    </script>
    <script>
    
    Vue.component('classmate-com',{
        template:"#mate",
        data:function(){
               return{ 
                   classMate:[
                       {
                           name:'小美',
                           say:'世界这么大'

                       },{
                           name:'小王',
                           say:'我喜欢小美'
                       },{
                           name:'小明',
                           say:'上课真开心'
                       }
                   ]

               }
            }
    })
    Vue.component('family-com',{
        template:"#family",
        data:function(){
               return{ 
                   familyMate:[
                       {
                           name:'姐姐',
                           say:'世界这么大'

                       },{
                           name:'弟弟',
                           say:'我喜欢小美'
                       },{
                           name:'小明',
                           say:'上课真开心'
                       }
                   ]

               }
            }
    })
    Vue.component('friend-com',{
        template:"#friend",
        data:function(){
               return{ 
                   friendMate:[
                       {
                           name:'发小',
                           say:'世界这么大'

                       },{
                           name:'小王',
                           say:'我喜欢小美'
                       },{
                           name:'小明',
                           say:'上课真开心'
                       }
                   ]

               }
            }
    })
    var vue = new Vue({
        el:"#app",
        data:{
            mateShow:false,
            familyShow:false,
            friendShow:false,
        },
        methods: {
            classMate:function(){
                if(this.mateShow==false){
                    this.mateShow=true
                }
                else{
                    this.mateShow=false
                }
                // this.mateShow=true
            },
            family:function(){
                if(this.familyShow==false){
                    this.familyShow=true
                }
                else{
                    this.familyShow=false
                }
                
            },
            friend:function(){
                if(this.friendShow==false){
                    this.friendShow=true
                }
                else{
                    this.friendShow=false
                }
                
            }
        },
    })
    </script>
</body>
</html>